<template>
  <div class="map-box">
    <div class="china-map-box">
      <div class="content row-flex-start" style="width:100%; height: 100%; ovorflow-x:auto">
        <div id="left_map" class="left_map" @click="showChinaMap" />
        <div id="right_opetate" class="right_opetate row-center" />
      </div>
    </div>

    <div class="top10">
      <div v-for="(item, index) of 10" :key="index" class="item">
        <div class="tit">广东</div>
        <div class="con">90,878</div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
import axios from 'axios'
echarts.registerMap('china', china)
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']

export default {
  props: {
    mapData: {
      type: Array,
      required: true,
      default: []
    }
  },
  data() {
    return {
      map: {}
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    getMapOpt(place) {
      const option = {
        backgroundColor: '#404a59', // 地图背景颜色
        // 以下是地图标题，我在此处设空，需要的可以自己加上
        title: {
          text: '全国用户位置分布',
          subtext: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        // 以下是地图右侧“还原”“下载”工具框
        toolbox: {
          show: true,
          right: 10,
          orient: 'vertical',
          top: 'center',
          feature: {
            dataView: { readOnly: true },
            restore: {},
            saveAsImage: {}
          },
          iconStyle: {
            normal: {
              borderColor: '#ccc'
            },
            emphasis: {
              borderColor: '#eee'
            }
          }
        },
        // 提示框组件
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          // 使用函数模板，传入的数据值 ——> value: number | Array
          formatter: function(param) {
            return param.name + '<br>登录数量: ' + param.value
          }
        },
        dataRange: {
          show: true,
          min: 0,
          max: 10000,
          text: ['多', '少'],
          realtime: true,
          textStyle: {
            color: '#fff'
          },
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: {
          map: place || 'china',
          label: {
            emphasis: {
              show: true
            },
            // 不需要显示地名可直接删除normal此项
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(255,255,255)'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#323c48', // 地图颜色
              borderColor: 'gba(0, 0, 0, 0.2)' // 地图边线颜色
            },
            emphasis: {
            //   areaColor: '#2a333d', // 鼠标移入颜色
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(1, 1, 1, 0.5)'
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo', // 对应上方配置
          textStyle: {
            'color': '#fff'
          }
        },
        {
          name: '登录人数', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: this.mapData
        }]
      }
      return option
    },
    // 显示中国地图
    showChinaMap() {
      const option = this.getMapOpt()
      this.map.setOption(option, true)
    },
    // 显示各省地图，这里使用axios请求本地文件，provice文件夹存在的位置为public/province（旧版本是static）
    getProvinceMapOpt(provinceAlphabet) {
      axios.get('province/' + provinceAlphabet + '.json').then((s) => {
        echarts.registerMap(provinceAlphabet, s.data)
        const option = this.getMapOpt(provinceAlphabet)
        this.map.setOption(option, true)
      })
    },
    initMap() {
      var dom = document.getElementById('left_map')
      this.map = echarts.init(dom)
      window.onresize = this.map.resize
      this.map.showLoading() // 加动画效果
      const option = this.getMapOpt()
      if (option && typeof option === 'object') {
        this.map.setOption(option, true)
        setTimeout(() => {
          this.map.hideLoading()
        }, 500)
      }

      if (option && typeof option === 'object') {
        this.map.setOption(option, true)
      }
      this.map.on('click', (param) => {
        console.log(param)
        event.stopPropagation()// 阻止冒泡
        // 找到省份名
        const provinceIndex = provincesText.findIndex(x => {
          return param.name === x
        })
        // 在这里判断provincesText中是否包含点击的省份名，有则渲染省级地图，无则无处理（需要可从此获得）
        if (provinceIndex === -1) {
          // 没有找到对应省份 城市的话，那么返回到全国地图
          this.map.setOption(option, true)
          return
        }
        const provinceAlphabet = provinces[provinceIndex]
        // 重新渲染各省份地图
        this.getProvinceMapOpt(provinceAlphabet)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.map-box{

.china-map-box {
  width: 100%;
  height: 560px;
  overflow: hidden;

.left_map {
  width: 100%;
  height: 100%;
}
.right_opetate {
  flex: 1;
  height: 100%;
  background: #404a59
}
}

.top10{
    display: flex;
    justify-content: space-between;
    .item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
      .tit{
        color: rgba(0,0,0,.45);
        font-size: 10px;
        line-height: 22px;
      }
      .con{
        overflow: hidden;
        color: rgba(0,0,0,.85);
        font-size: 16px;
        line-height: 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }
}

</style>

